﻿@model AgileDashboard.Entities.WorkItem

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<script>



    $(document).ready(function () {
        $("#votedetail").kendoGrid({
            height: 250
        });
    });



    function createChart() {
        $("#chart").kendoChart({
            theme: $(document).data("kendoSkin") || "default",
            dataSource: {
                transport: {
                    read: {

                        url: "/Vote/VoteDetail/?workItemId=@(Model.Id)",
                        dataType: "json"
                    }
                },
                sort: {
                    field: "Vote",
                    dir: "asc"
                }
            },
            title: {
                text: "Vote Results"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "bar",
                labels: {
                    visible: true
                }
            },
            series:
                        [{
                            field: "Vote",
                            name: "Vote"
                        }],
            categoryAxis: {
                field: "UserName",
                labels: {
                    rotation: -90
                }
            },
            valueAxis: {
                labels: {
                    format: "{0:N0}"
                },
                majorUnit: 100
            },
            tooltip: {
                visible: true,
                format: "{0:N0}"
            }
        });
    }

    $(document).ready(function () {
        setTimeout(function () {
            // Initialize the chart with a delay to make sure
            // the initial animation is visible
            createChart();

            $("#example").bind("kendo:skinChange", function (e) {
                createChart();
            });
        }, 400);
    });






</script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


<h2>Edit Work Item @(Model.Id)</h2>
<hr />

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>WorkItem</legend>

        @Html.HiddenFor(model => model.Id)


        <div class="editor-label">
            @Html.LabelFor(model => model.Status)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Status)
            @Html.ValidationMessageFor(model => model.Status)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.WinningVote)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.WinningVote)
            @Html.ValidationMessageFor(model => model.WinningVote)
        </div>


<br />

<h2>Vote Summary for Work Item  </h2>
<hr />


<br />

  <div class="chart-wrapper">
                <div id="chart"></div>
 </div>



 <table id="votedetail" width="100%">
<thead>
<tr>
    <th>User Name</th>
    <th>Vote</th>
    <th>Notes</th>
    <th>TimeStamp</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.VoteDetails) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.UserName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Vote)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Notes)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CreationTimeStamp)
        </td>
    </tr>
}
</tbody>
</table>


        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to Work Item List", "Index")
</div>
